<template>
  <div class="flex items-center gap-4">
    <el-upload
      v-if="!loading"
      :auto-upload="false"
      :on-change="handleClickpro"
      :show-file-list="false"
      class="text-black"
      multiple
    >
      <el-icon><Paperclip /></el-icon>
    </el-upload>
    <LineLoading v-if="loading" />
    <LanguageTranslator
      class="cursor-pointer text-[#000] active:text-[#fff]"
      @click="handleClickTranslate"
    />
    <!-- 表情选择器 -->
    <slot name="emojiSelector"></slot>
  </div>
</template>

<script setup lang="ts">
import type { UploadFile } from 'element-plus';

import type { SelfFilesCardProps } from '../type';

import { LanguageTranslator, LineLoading } from '@vben/icons';

import { Paperclip } from '@element-plus/icons-vue';

import { translateLanguage } from '#/api/agent/conversation';
import { uploadFiles } from '#/api/agent/upload';

const files = defineModel<SelfFilesCardProps[]>('modelValue');
const translateText = defineModel<string>('translateText');
const loading = ref(false);
// 文件上传async
const handleClickpro = async (file: UploadFile) => {
  loading.value = true;

  // 检查 file.raw 是否存在
  if (!file.raw) {
    ElMessage.error('文件上传失败：文件数据为空');
    loading.value = false;
    return;
  }

  const formData = new FormData();
  formData.append('files', file.raw);
  // ElMessage.info('上传中...');
  const data = await uploadFiles(formData);

  setTimeout(() => {
    const res = {
      message: '文件上传成功',
      fileName: file.raw!.name,
      uid: file.raw!.uid,
      fileSize: file.raw!.size,
      imgFile: file.raw!,
    };
    files.value?.push({
      id: files.value.length,
      uid: res.uid,
      name: data?.success_files[0]?.file_name,
      fileSize: data?.success_files[0]?.size,
      url: data?.success_files[0]?.url,
      imgFile: res.imgFile,
      showDelIcon: true,
      imgVariant: 'square',
    });

    // ElMessage.success('上传成功');
    loading.value = false;
  }, 1000);
};

// 点击翻译
const handleClickTranslate = async () => {
  const res = await translateLanguage({
    text: translateText.value,
  });
  translateText.value = res.text;
};
</script>
<style scoped lang="scss"></style>
